{% extends "main/base.html" %}
{% load static %}

{% block title %}发展历史{% endblock %}

{% block content %}
<div class="mt-3">
  {% if history %}
    <div class="row">
      <div class="col-3 border-end">
        <nav aria-label="Page navigation" class="ms-auto">
          <ul class="pagination justify-content-center">
          <li class="page-item">
            <a class="page-link{% if not has_previous %} disabled{% endif %}"
               href="?number={{ first.number }}">&laquo;</a>
          </li>
          <li class="page-item">
            <a class="page-link{% if not has_previous %} disabled{% endif %}"
               href="?number={{ previous.number }}"
               {% if has_previous %}id="previous-link"{% endif %}>&lsaquo;</a>
          </li>
          <li class="page-item active" aria-current="page">
            <span class="page-link">{{ history.number }}</span>
          </li>
          <li class="page-item">
            <a class="page-link{% if not has_next %} disabled{% endif %}"
               href="?number={{ next.number }}"
               {% if has_next %}id="next-link"{% endif %}>&rsaquo;</a>
          </li>
          <li class="page-item">
            <a class="page-link{% if not has_next %} disabled{% endif %}"
               href="?number={{ last.number }}">&raquo;</a>
          </li>
          </ul>
        </nav>
        <nav class="nav nav-pills flex-column">
          {% for part in histories %}
            {% if part.number == history.number %}
              <a class="nav-link active" aria-current="page">{{ part.display|safe }}</a>
            {% else %}
              <a class="nav-link" href="?number={{ part.number }}">{{ part.display|safe }}</a>
            {% endif %}
          {% endfor %}
        </nav>
      </div>
      <div class="col-9">
      <strong class="card-title">
        {{ history.display|safe }}
      </strong>
      <hr>
      {{ history.content|safe }}
      </div>
    </div>
  {% else %}
    <div class="alert alert-secondary" role="alert">
      目前还没有教徒编写老教历史哦！
    </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'main/js/history.js' %}"></script>
{% endblock %}